<template>
    <div class="productFileMangement">
      <el-card class="box-card">
         <p style="font-weight: bold">产品档案管理</p>
      </el-card>
      <el-card class="box-card" style="margin:5px 0">
        <div class="itemTitle">
            产品类型:
            <el-select class="selectFont" placeholder="选择类别" @change="getProductArchivesListByCondition"
                       style="width: 156px;" v-model="chooseType" size="small">
                <el-option   class="selectFont" v-for="(item,index) in getCategorylevel"
                           :key="index" :label="item" :value="item">
                </el-option>
            </el-select>
            行业/品类/型号搜索:
            <el-cascader  class="selectFont"  size="small" @change="getLevelSet"
                         change-on-select
                         :options="getCategoryProductListData" v-model="form.region">
            </el-cascader>
            价格范围:
            <el-input-number size="small" v-model="minPrice" controls-position="right" :min="1" :max="1000000000"></el-input-number>
            <span>-</span>
            <el-input-number size="small"  v-model="maxPrice" controls-position="right" :min="1" :max="1000000000"></el-input-number>
            <el-button size="mini" type="primary" @click="getDataDetailSearch">查询</el-button>
             <div class="pickerOption">
                <span >共{{this.totalRecord}}条数据&nbsp;&nbsp;</span>
             </div>
         </div>
        <div style="border: 1px solid #e3e2e2;border-top: 0">
          <el-table :data="tableSaleData" size="mini" style="width: 100%;margin-top:20px">
            <el-table-column
              width="120px"
              label="产品主图">
              <template slot-scope="scope">
                <img :src="scope.row.productMainImage" width="40px" height="40px">
              </template>
            </el-table-column>
            <el-table-column
              prop="productName"
              label="产品名称">
            </el-table-column>
            <el-table-column
              prop="category"
              label="所属品类">
            </el-table-column>
            <el-table-column
              prop="productCode"
              label="型号">
            </el-table-column>
            <el-table-column
              prop="productType"
              label="产品类型">
            </el-table-column>
            <el-table-column
              prop="skuNum"
              sortable
              label="SKU数量(人)">
            </el-table-column>
            <el-table-column
              prop="guidePrice"
              sortable
              label="产品价格(元)">
            </el-table-column>
            <el-table-column class-name="status-col" label="状态" width="110"
                             prop="isSale"
                             :filters="[{ text: '已上市', value: '1' }, { text: '未上市', value: '0' }]"
                             :filter-method="filterTag"
                             filter-placement="bottom-end">
              <template slot-scope="scope">
                <span :type="scope.row.isSale | statusFilter" :style="{'color' :'0' === scope.row.isSale| formatStata ? 'red' : 'green'}">{{scope.row.isSale | formatStata}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="操作">
              <template slot-scope="scope">
                <el-button  type="text" @click="editSaleStatus(scope.row)">{{scope.row.isSale | formatStatas}}</el-button>
                <el-button type="text" @click="toUrlEdit(scope.row.productCode)">编辑详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationSet">
            <div class="pagination-container">
              <div class="toStart" @click="getDataDetailPage(1)">首页</div>
              <el-pagination background layout="prev, pager, next"
                             @current-change="getDataDetailPage" :current-page.sync="currentPage"
                             :total="totalRecord">
              </el-pagination>
            </div>
          </div>
        </div>

      </el-card>

      <el-dialog title="录入产品" :visible.sync="newproduct" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="产品名称">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="行业/品类">
              <el-select v-model="form.region" style="width:100%" placeholder="请选择活动区域">
                  <el-option v-for="(item,index) in getCategoryProductListData" :key="index"
                             :label="item.specificationName" :value="item.specificationId">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="产品型号">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newproduct = false">取 消</el-button>
          <el-button type="primary" @click="newproduct = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import * as opreate from 'api/getData'
import { mapState } from 'vuex'

export default {
    name: 'productFileMangement',
    data () {
        return {
          newproduct:false,
          form:{
            name:'',
            productCode:'',
            category:'',
            region:['全部']
          },
          getCategorylevel:['全部','引流款','利润款','标杆款','辅助款','新品款'],
          minPrice: '1',
          maxPrice: '10000',
          chooseType:'全部',
          totalRecord: 0,
          tableSaleData: [],
          productType: '',
          getCategoryProductListData:[],
          productCode: '',
          categoryId:'',
          currentPage:0
        }
    },
  computed:{
    ...mapState(["user"])
  },
     mounted() {
       this.getDataDetail()
       this.getCategoryProductList()
     },
     filters: {
       statusFilter(status) {
         const statusMap = { 1: 'primary', 0: 'danger' }
         return statusMap[status]
       },
       formatStata(status) { // 状态显示转换
         const statusMap = { 0: '未上市', 1: '已上市' }
         return statusMap[status]
       },
       formatStatas(status) {
         const statusMap = { 1: '下市', 0: '上市' }
         return statusMap[status]
       }
     },
    methods: {
      filterTag(newVal,rowSet){
        return rowSet.isSale === newVal
      },
      getDataDetailSearch(){
        this.getDataDetail(this.categoryId, this.productCode)
      },
      getDataDetailPage(pageNum = 1){
        this.getDataDetail(this.categoryId, this.productCode, pageNum)
      },
      getLevelSet(newVal){
        let [ cateSetFirst = '', cateSetSecond = '', productCode = '' ] = newVal
        cateSetSecond = cateSetSecond != '' ? cateSetSecond : cateSetFirst
        this.categoryId = '全部' != cateSetFirst ? cateSetSecond :  ''
        this.productCode = productCode
        this.getDataDetail(this.categoryId, this.productCode)
      },
      editSaleStatus(rowSet) {
        let { productCode, isSale } = rowSet
        isSale = isSale == '1' ? '0' : '1'
        opreate.updateSaleStatus({
          productCode: productCode,
          isSale: isSale,
          phoneNumber: this.user.phone
        }).then((res) => {
          if(res.data == '1'){
            rowSet.isSale = isSale
          }else {
            this.$message.error('操作失败')
          }
        })
      },
      getProductArchivesListByCondition() {
        this.getDataDetail(this.categoryId, this.productCode)
      },
      getDataDetail(categoryId = '', productCode = '', pageNum = 1) {
        opreate.getProdArchiveByCondition({
          categoryId,
          productCode,
          pageNum,
          minPrice: this.minPrice,
          maxPrice: this.maxPrice,
          productType:this.chooseType == '全部' ? '':this.chooseType,
          phoneNumber: this.user.phone
        }).then(res => {
          let { list = [], totalRecord = 0, currentPage = 0 } = res.data || {}
          this.tableSaleData = list || []
          this.totalRecord = totalRecord
          this.currentPage = currentPage
        })
      },
      getCategoryProductList() {
        opreate.getCateProdList({}).then(res => {
          this.getCategoryProductListData = [ { label: "全部",value: '全部' }, ...res.data ]
        })
      },
      toUrlEdit(code){
        this.$router.push({ name:'productFileMangementDetail',params:{ code:code } })
      }
    }
}
</script>

<style scoped>
  .saleMarketRight .el-radio-group label,.el-form-item label{
    margin-left: 20px !important;
  }
  .img{
      width: 180px;
      background: #e8eef4
  }
  .modeInfo {
      width: 180px;
  }
  .pickerOption {
    align-items: center;
  }
  .titleInfo{
      padding-left:10px;
      border: 1px solid #e2e2e2
  }
  .itemTitle {
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: -webkit-box;
    justify-content: space-between;
  }
 .org-filter {
    width: 150px;
 }
 .title{
    padding: 7px 10px !important;
    background:#e8eef4;
 }
  .containOne{
    background: #ffffff;
    padding-bottom: 10px;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 3px 12px 1px #e2e2e2;
  }
  .containTwo {
      background: #e7eaed;
      padding-bottom: 10px;
      border: 1px solid #e2e2e2;
      box-shadow: 0px 3px 12px 1px #e2e2e2;
  }
  .itemTitle {
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: -webkit-box;
    justify-content: space-between;
  }
  .borTop{
      border-top: 0px;
      line-height: 32px
  }
  .descTitle{
    margin-bottom: 20px;
    font-size: 16px;
  }
</style>

